<template>
  <div class="import-question-signal-wrap">
    <!-- 标题 -->
    <div class="import-question-signal-title page-title-wrap">
      <p class="page-title-name">
        <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
        <span class="page-title-text">重大问题</span>
      </p>
      <div class="title-tabs">
        <p class="title-tabs-item" :class="{'active': showType==1}" @click="showType=1">实时</p>
        <p class="title-tabs-item" :class="{'active': showType==2}" @click="showType=2">历史</p>
      </div>
    </div>
    <!-- 主展示区域 -->
    <div class="import-question-signal-content">
      <!-- 实时 -->
      <real-time-import-page v-show="showType == 1" @openCellCenter="openCellCenter"></real-time-import-page>
      <!-- 历史 -->
      <history-import-page v-if="showType == 2" @openCellCenter="openCellCenter"></history-import-page>
    </div>
    <div class="cell-center-wrap" v-if="showCellCenter">
      <card-cell-center :orgId="orgId" :isShowAll="true" :reCloseFun="closeCellCenter"></card-cell-center>
    </div>
  </div>
</template>
<script>
import '@/styles/common/detailPage.scss'
import RealTimeImportPage from './PageModel/RealTimeImportPage'
import HistoryImportPage from './PageModel/HistoryImportPage'
import CardCellCenter from '@/components/Cards/CardCellCenter'

export default {
  name: 'ImportQuestion',
  props: {
    parames: {
      default() {
        return false
      },
    },
  },
  components: {
    RealTimeImportPage,
    HistoryImportPage,
    CardCellCenter,
  },
  data() {
    return {
      orgId: '', // 传递给呼叫中心的orgId
      showCellCenter: false,
      showType:
        this.parames && this.parames.showType ? this.parames.showType : 1, // 展示的类型 1：实时  2：历史
    }
  },
  created() {},
  methods: {
    openCellCenter(orgId) {
      if (orgId) {
        this.orgId = orgId
      } else {
        this.orgId = ''
      }
      this.showCellCenter = true
    },
    closeCellCenter() {
      this.showCellCenter = false
    },
  },
}
</script>
<style lang="scss" scoped>
.import-question-signal-wrap {
  padding: 0 30px 80px 30px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 20px rgba(16, 55, 88, 0.3) inset;
  background-color: #061723;
  .import-question-signal-content {
    width: 100%;
    height: calc(100% - 80px);
  }
}
</style>
